<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../js/css/layui.css">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>

    <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">
            <form class="layui-form" action="">
                <div class="amin-content">
                    <div class="layui-row layui-col-space15">

                        <div class="layui-col-md10">
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label">菜单名称</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="title" lay-verify="required|title" autocomplete="off" placeholder="请输入菜单名称" class="layui-input">
                                    </div>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label">状态</label>
                                    <div class="layui-input-inline">
                                        <input type="radio" name="sex" value="启用" title="启用" checked="">
                                        <input type="radio" name="sex" value="关闭" title="关闭">
                                    </div>
                                    <div class="layui-form-mid layui-word-aux">关闭后，管理菜单中此项目将被隐藏</div>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label">排序</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="title" lay-verify="required|title" autocomplete="off" placeholder="请输入副标题" class="layui-input">
                                    </div>
                                    <div class="layui-form-mid layui-word-aux">列表中显示的顺序</div>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label">上级菜单</label>
                                    <div class="layui-input-inline">
                                        <select name="interest" lay-filter="aihao">
                                            <option value="">顶级菜单</option>
                                            <option value="1">头条二</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-form-item" id="show_icon">
                                <div class="layui-inline">
                                    <label class="layui-form-label">菜单图标</label>
                                    <div class="layui-input-block">
                                        <i style="font-size: 30px;" class="layui-icon layui-icon-rate-half"></i>
                                        <i style="font-size: 30px;"  class="layui-icon layui-icon-rate"></i>
                                        <i style="font-size: 30px;"  class="layui-icon layui-icon-rate-solid"></i>
                                        <i style="font-size: 30px;"  class="layui-icon layui-icon-cellphone"></i>
                                        <i style="font-size: 30px;"  class="layui-icon layui-icon-vercode"></i>
                                        <i style="font-size: 30px;"  class="layui-icon layui-icon-login-wechat"></i>
                                        <i style="font-size: 30px;"  class="layui-icon layui-icon-login-qq"></i>
                                        <i style="font-size: 30px;"  class="layui-icon layui-icon-login-weibo"></i>
                                        <i style="font-size: 30px;"  class="layui-icon layui-icon-password"></i>
                                        <i style="font-size: 30px;"  class="layui-icon layui-icon-username"></i>
                                        <i style="font-size: 30px;"  class="layui-icon layui-icon-refresh-3"></i>
                                        <i style="font-size: 30px;"  class="layui-icon layui-icon-auz"></i>
                                        <i style="font-size: 30px;"  class="layui-icon layui-icon-spread-left"></i>
                                        <i style="font-size: 30px;"  class="layui-icon layui-icon-shrink-right"></i>
                                        <i style="font-size: 30px;"  class="layui-icon layui-icon-snowflake"></i>
                                        <i style="font-size: 30px;"  class="layui-icon layui-icon-tips"></i>
                                        <i style="font-size: 30px;"  class="layui-icon layui-icon-note"></i>
                                        <i style="font-size: 30px;"  class="layui-icon layui-icon-home"></i>
                                        <i style="font-size: 30px;"  class="layui-icon layui-icon-senior"></i>
                                        <i style="font-size: 30px;"  class="layui-icon layui-icon-refresh"></i>
                                        <i style="font-size: 30px;"  class="layui-icon layui-icon-refresh-1"></i>
                                        <i style="font-size: 30px;"  class="layui-icon layui-icon-flag"></i>
                                        <i style="font-size: 30px;"  class="layui-icon layui-icon-theme"></i>
                                        <i style="font-size: 30px;"  class="layui-icon layui-icon-notice"></i>
                                        <i style="font-size: 30px;"  class="layui-icon layui-icon-website"></i>
                                        <i style="font-size: 30px;"  class="layui-icon layui-icon-console"></i>
                                        <i style="font-size: 30px;"  class="layui-icon layui-icon-face-surprised"></i>
                                        <i style="font-size: 30px;"  class="layui-icon layui-icon-set"></i>
                                        <i style="font-size: 30px;"  class="layui-icon layui-icon-template-1"></i>
                                        <i style="font-size: 30px;"  class="layui-icon layui-icon-app"></i>
                                        <i style="font-size: 30px;"  class="layui-icon layui-icon-template"></i>
                                        <i style="font-size: 30px;"  class="layui-icon layui-icon-praise"></i>
                                        <i style="font-size: 30px;"  class="layui-icon layui-icon-tread"></i>
                                        <i style="font-size: 30px;"  class="layui-icon layui-icon-male"></i>
                                        <i style="font-size: 30px;"  class="layui-icon layui-icon-female"></i>
                                        <i style="font-size: 30px;"  class="layui-icon layui-icon-camera"></i>
                                        <i style="font-size: 30px;"  class="layui-icon layui-icon-camera-fill"></i>
                                        <i style="font-size: 30px;"  class="layui-icon layui-icon-more"></i>
                                        <i style="font-size: 30px;"  class="layui-icon layui-icon-more-vertical"></i>
                                        <i style="font-size: 30px;"  class="layui-icon layui-icon-rmb"></i>
                                        <i style="font-size: 30px;"  class="layui-icon layui-icon-dollar"></i>
                                        <i style="font-size: 30px;"  class="layui-icon layui-icon-diamond"></i>
                                        <i style="font-size: 30px;"  class="layui-icon layui-icon-fire"></i>
                                        <i style="font-size: 30px;"  class="layui-icon layui-icon-return"></i>
                                        <i style="font-size: 30px;"  class="layui-icon layui-icon-location"></i>
                                        <i style="font-size: 30px;"  class="layui-icon layui-icon-read"></i>
                                        <i style="font-size: 30px;"  class="layui-icon layui-icon-survey"></i>
                                        <i style="font-size: 30px;"  class="layui-icon layui-icon-face-smile"></i>
                                        <i style="font-size: 30px;"  class="layui-icon layui-icon-face-cry"></i>
                                        <i style="font-size: 30px;"  class="layui-icon layui-icon-cart-simple"></i>
                                        <i style="font-size: 30px;"  class="layui-icon layui-icon-cart"></i>
                                        <i style="font-size: 30px;"  class="layui-icon layui-icon-next"></i>
                                        <i style="font-size: 30px;"  class="layui-icon layui-icon-upload-drag"></i>
                                        <i style="font-size: 30px;"  class="layui-icon layui-icon-upload"></i>
                                        <i style="font-size: 30px;"  class="layui-icon layui-icon-download-circle"></i>
                                        <i style="font-size: 30px;"  class="layui-icon layui-icon-component"></i>


                                        <i style="font-size: 30px;"  class="layui-icon layui-icon-file-b"></i>


                                        <i style="font-size: 30px;"  class="layui-icon layui-icon-user"></i>


                                        <i style="font-size: 30px;"  class="layui-icon layui-icon-find-fill"></i>


                                        <i style="font-size: 30px;"  class="layui-icon layui-icon-loading layui-icon layui-anim layui-anim-rotate layui-anim-loop"></i>


                                        <i style="font-size: 30px;"  class="layui-icon layui-icon-loading-1 layui-icon layui-anim layui-anim-rotate layui-anim-loop"></i>


                                        <i style="font-size: 30px;"  class="layui-icon layui-icon-add-1"></i>



                                        <i style="font-size: 30px;"  class="layui-icon layui-icon-play"></i>


                                        <i style="font-size: 30px;"  class="layui-icon layui-icon-pause"></i>


                                        <i style="font-size: 30px;"  class="layui-icon layui-icon-headset"></i>


                                        <i style="font-size: 30px;"  class="layui-icon layui-icon-video"></i>


                                        <i style="font-size: 30px;"  class="layui-icon layui-icon-voice"></i>


                                        <i style="font-size: 30px;"  class="layui-icon layui-icon-speaker"></i>


                                        <i style="font-size: 30px;"  class="layui-icon layui-icon-fonts-del"></i>



                                        <i style="font-size: 30px;"  class="layui-icon layui-icon-fonts-code"></i>


                                        <i style="font-size: 30px;"  class="layui-icon layui-icon-fonts-html"></i>


                                        <i style="font-size: 30px;"  class="layui-icon layui-icon-fonts-strong"></i>


                                        <i style="font-size: 30px;"  class="layui-icon layui-icon-unlink"></i>


                                        <i style="font-size: 30px;"  class="layui-icon layui-icon-picture"></i>


                                        <i style="font-size: 30px;"  class="layui-icon layui-icon-link"></i>


                                        <i style="font-size: 30px;"  class="layui-icon layui-icon-face-smile-b"></i>



                                        <i style="font-size: 30px;"  class="layui-icon layui-icon-tabs"></i>




                                        <i style="font-size: 30px;"  class="layui-icon layui-icon-circle"></i>


                                        <i style="font-size: 30px;"  class="layui-icon layui-icon-edit"></i>


                                        <i style="font-size: 30px;"  class="layui-icon layui-icon-share"></i>


                                        <i style="font-size: 30px;"  class="layui-icon layui-icon-delete"></i>


                                        <i style="font-size: 30px;"  class="layui-icon layui-icon-form"></i>


                                        <i style="font-size: 30px;"  class="layui-icon layui-icon-cellphone-fine"></i>


                                        <i style="font-size: 30px;"  class="layui-icon layui-icon-dialogue"></i>



                                        <i style="font-size: 30px;"  class="layui-icon layui-icon-fonts-clear"></i>


                                        <i style="font-size: 30px;"  class="layui-icon layui-icon-layer"></i>


                                        <i style="font-size: 30px;"  class="layui-icon layui-icon-date"></i>


                                        <i style="font-size: 30px;"  class="layui-icon layui-icon-water"></i>


                                        <i style="font-size: 30px;"  class="layui-icon layui-icon-carousel"></i>


                                        <i style="font-size: 30px;"  class="layui-icon layui-icon-prev-circle"></i>



                                        <i style="font-size: 30px;"  class="layui-icon layui-icon-layouts"></i>


                                        <i style="font-size: 30px;"  class="layui-icon layui-icon-util"></i>


                                        <i style="font-size: 30px;"  class="layui-icon layui-icon-templeate-1"></i>


                                        <i style="font-size: 30px;"  class="layui-icon layui-icon-upload-circle"></i>


                                        <i style="font-size: 30px;"  class="layui-icon layui-icon-tree"></i>
                                        <i style="font-size: 30px;"  class="layui-icon layui-icon-table"></i>
                                        <i style="font-size: 30px;"  class="layui-icon layui-icon-chart"></i>
                                        <i style="font-size: 30px;"  class="layui-icon layui-icon-chart-screen"></i>
                                        <i style="font-size: 30px;"  class="layui-icon layui-icon-engine"></i>
                                        <i style="font-size: 30px;"  class="layui-icon layui-icon-file"></i>
                                        <i style="font-size: 30px;"  class="layui-icon layui-icon-404"></i>
                                        <i style="font-size: 30px;"  class="layui-icon layui-icon-about"></i>
                                        <i style="font-size: 30px;"  class="layui-icon layui-icon-right"></i>
                                        <i style="font-size: 30px;"  class="layui-icon layui-icon-circle-dot"></i>
                                        <i style="font-size: 30px;"  class="layui-icon layui-icon-search"></i>
                                        <i style="font-size: 30px;"  class="layui-icon layui-icon-set-fill"></i>
                                        <i style="font-size: 30px;"  class="layui-icon layui-icon-group"></i>
                                        <i style="font-size: 30px;"  class="layui-icon layui-icon-friends"></i>
                                        <i style="font-size: 30px;"  class="layui-icon layui-icon-reply-fill"></i>
                                        <i style="font-size: 30px;"  class="layui-icon layui-icon-menu-fill"></i>
                                        <i style="font-size: 30px;"  class="layui-icon layui-icon-log"></i>
                                        <i style="font-size: 30px;"  class="layui-icon layui-icon-picture-fine"></i>
                                        <i style="font-size: 30px;"  class="layui-icon layui-icon-face-smile-fine"></i>
                                        <i style="font-size: 30px;"  class="layui-icon layui-icon-list"></i>
                                        <i style="font-size: 30px;"  class="layui-icon layui-icon-release"></i>
                                        <i style="font-size: 30px;"  class="layui-icon layui-icon-ok"></i>
                                        <i style="font-size: 30px;"  class="layui-icon layui-icon-help"></i>
                                        <i style="font-size: 30px;"  class="layui-icon layui-icon-chat"></i>
                                        <i style="font-size: 30px;"  class="layui-icon layui-icon-top"></i>
                                        <i style="font-size: 30px;"  class="layui-icon layui-icon-star"></i>
                                        <i style="font-size: 30px;"  class="layui-icon layui-icon-star-fill"></i>
                                        <i style="font-size: 30px;"  class="layui-icon layui-icon-close-fill"></i>
                                        <i style="font-size: 30px;"  class="layui-icon layui-icon-close"></i>
                                        <i style="font-size: 30px;"  class="layui-icon layui-icon-ok-circle"></i>
                                        <i style="font-size: 30px;"  class="layui-icon layui-icon-add-circle-fine"></i>
                                    </div>

                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label">菜单路由</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="title" lay-verify="required|title" autocomplete="off" placeholder="请输入菜单路由" class="layui-input">
                                    </div>
                                    <div class="layui-form-mid layui-word-aux">点击菜单时访问的页面地址，填相对路由，#号表示不需要地址</div>
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <label class="layui-form-label">授权路由</label>
                                <div class="layui-input-block">
                                    <textarea  class="layui-textarea"></textarea>
                                </div>
                                <div class="layui-form-mid layui-word-aux">完成此菜单的功能需要的路由，填相对路由，每个路由占用一行</div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">信息描述</label>
                                <div class="layui-input-block">
                                    <textarea  class="layui-textarea"></textarea>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <button class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
                                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </form>
        </div>
    </div>


<script src="../layui.all.js"></script>
<script>
    layui.use(['jquery','form', 'layer'],function () {
        var form = layui.form;
        var $ = layui.$;
        form.on('select(aihao)', function(data){
           if(data.value==""){
               $("#show_icon").css('display','block');
           }else{
               $("#show_icon").css('display','none');
           }
        });

    });
</script>
</body>
</html>